<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, nextTick } from "vue";
import Layout from "@/layout";
import {
  registerMicroApps,
  start,
  addGlobalUncaughtErrorHandler,
} from "qiankun";
// import { getConfig } from '@/api/index.js';
import { getRegisterMicroApps } from "@/api/microApp";
const router = useRouter();

// 注册微应用
const registerMicroAppsFun = async () => {
  const { errcode, data } = await getRegisterMicroApps();
  if (errcode === 0) {
    let list = [];
    (data?.rows || []).forEach((item) => {
      list.push({
        name: item.code,
        entry: item.entry,
        container: "#_MicroApps", // 统一注册容器
        activeRule: item.activeRule,
        props: item.childProps || {},
      });
    });
    console.log(list);
    if (list.length > 0) {
      // 注册
      registerMicroApps(list);
      addGlobalUncaughtErrorHandler((event) =>
        console.warn("qiankun global error", event)
      );
      if (!window.qiankunStarted) {
        window.qiankunStarted = true;
        nextTick(() => {
          start();
        });
      }
    }
  }
};

onMounted(async () => {
  registerMicroAppsFun();
});
</script>

<template>
  <Layout style="height: inherit">
    <template #header>header</template>
    <template #content>
      <!-- 添加过渡 -->
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </template>
  </Layout>
</template>

<style lang="scss">
body {
  height: 100vh;
}

#app {
  height: inherit;
}
</style>
